<template>
    <view>
        <view class="m-home-head">
            <m-hot-search></m-hot-search>
            <tui-tabs :tabs="tabs" @change="tabChange" selectedColor="red" sliderBgColor="red"></tui-tabs>
        </view>
        <Layout :topic="topic" :style="{ 'margin-top': `${topHeight}px` }"></Layout>
        <m-scroll-top
            :scrollTop="scrollTop"
            :icons="[{ imageUrl: '/static/icon/search.png', click: () => {} }]"
        ></m-scroll-top>
    </view>
</template>

<script setup lang="ts">
import { ref, shallowRef } from 'vue'
import { onLoad, onPageScroll, onReachBottom, onReady } from '@dcloudio/uni-app'
import { getHomeTopic } from '@/api/home'
import MScrollTop from '@/components/common/MScrollTop.vue'
import MHotSearch from '@/components/business/MHotSearch.vue'
import Layout from './Layout.vue'
const tabs = shallowRef<Array<Topic>>([])
const topic = ref(0)
const topHeight = ref(0)
getHomeTopic().then((v) => {
    tabs.value = v.data || []
    setTimeout(() => {
        uni.createSelectorQuery()
            .select('.m-home-head')
            .boundingClientRect((data) => {
                if (data) {
                    topHeight.value = data instanceof Array ? data[0].height ?? 0 : data.height ?? 0
                }
            })
            .exec()
    })
})
//返回顶部
let scrollTop = ref(0)
onPageScroll((e) => {
    scrollTop.value = e.scrollTop
})
function tabChange(index: number) {
    topic.value = tabs.value[index].topicId
}
</script>

<style lang="scss" scoped>
.m-home-head {
    width: 100%;
    top: 0;
    position: fixed;
    z-index: $m-z-index-l1;
}
</style>
